<script setup lang="ts">
import { ElForm } from 'element-plus'
import { ObjectUtil } from '@utils/object-util'
import { Pages } from '@typings/pages'
import YkDatePicker from '@yk/components/date-picker/YkDatePicker.vue'
import YkTableColumn from '@yk/components/table-column/YkTableColumn.vue'
import YkPagination from '@yk/components/pagination/YkPagination.vue'
import { Download } from '@element-plus/icons-vue'
import { getLogListByPageAPI } from '@/api/log'
import { DeviceDTO } from '@/api/entity/device'
import { OperLogDTO } from '@/api/entity/log'

defineOptions({ name: 'DeviceAlarmRecord' })
const props = defineProps<{
  device: DeviceDTO
}>()

onMounted(() => {
  searchHandle()
})

// region TODO 查询
const searchParams = reactive({
  // 结束时间
  endTime: '',
  // 开始时间
  startTime: '',
  // 查询类型（0-操作日志， 1-上下线）
  type: '' as unknown as 0 | 1,
  deviceId: ''
})
function searchHandle () {
  pages.pageNum = 1
  searchParams.deviceId = props.device.id
  exportParams.value = ObjectUtil.copy(searchParams)
  getTableData()
}
// endregion

// region TODO 表格数据
const pages = reactive(new Pages())
const tableData = shallowRef<OperLogDTO[]>([])
function getTableData () {
  const loading = ElLoading.service()
  getLogListByPageAPI({
    ...pages.getParams(),
    param: searchParams
  }).then((res) => {
    res.result().then((rdata) => {
      tableData.value = rdata.records
      pages.total = rdata.total
    })
  }).finally(loading.close)
}
// endregion

// region TODO 监听设备发生变化
watch(() => props.device, (nv, ov) => {
  if (props.device && nv.id !== ov?.id) {
    searchHandle()
  }
})
// endregion

// region TODO 导出
const exportParams = shallowRef<typeof searchParams>()
// endregion
</script>

<template>
  <div class="wh-100 c_card-white">
    <div class="c_card_header">
      <div class="c_card-title">设备日志</div>
      <div class="c_header_right">
        <el-link href="/#/log/index" type="primary">
          <span class="color-primary">更多设备日志</span>
        </el-link>
      </div>
    </div>
    <!--搜索表单-->
    <el-form inline class="c_form-search" @submit.prevent="searchHandle">
      <el-form-item>
        <yk-date-picker
          v-model:start="searchParams.startTime" v-model:end="searchParams.endTime" type="daterange"
          value-format="YYYY-MM-DD HH:mm:ss"
          :days="30"
          :default-date="6"
        />
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchParams.type" placeholder="请选择日志类型" clearable>
          <el-option value="">全部日志</el-option>
          <el-option label="操作日志" :value="0" />
          <el-option label="上下线日志" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchHandle">查询</el-button>
      </el-form-item>
      <el-form-item class="float-right mr-0">
        <export-file url="/log/export" :params="exportParams">
          <el-button class="c_btn--export" :icon="Download as any">导出</el-button>
        </export-file>
      </el-form-item>
    </el-form>
    <!--表格-->
    <div v-ref-height class="h-100" style="height: calc(100% - 80px);">
      <!--表格-->
      <el-table
        class="c_table-page w-100" stripe
        :data="tableData"
        max-height="calc(var(--ref-height) - 45px)"
      >
        <el-table-column label="#" type="index" fixed />
        <yk-table-column label="类型" prop="">
          <template #default="scope">
            <el-tag v-if="[4, 5].includes(scope.row.businessType)" type="success" effect="light">上下线</el-tag>
            <el-tag v-else effect="light" style="width: 56px;">操作</el-tag>
          </template>
        </yk-table-column>
        <yk-table-column label="内容" prop="message" />
        <yk-table-column label="操作时间" prop="createdAt" sortable />
        <yk-table-column label="操作用户" prop="operName" />
      </el-table>
      <!--分页-->
      <yk-pagination class="c_table-pagination-page" :pages="pages" @handle="getTableData" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.control-strip {
  background-color: #F7F8FA;
  padding: 4px;
  border-radius: 2px;
  display: inline-flex;
  .control-strip__item {
    padding: 4px 16px;
    border-radius: 2px;
    color: var(--el-text-color-regular);
    @include d-flex(center);
    font-size: 14px;
    cursor: pointer;
    .icon {
      margin-right: 4px;
      font-size: 16px;
    }
    &.is-active {
      color: var(--el-color-primary);
      background-color: white;
    }
  }
}
</style>
